<template>
	<view>
		<!-- 2主体 -->
		<view class="group-detail">
			<!-- 轮播图 -->
			<view class="banner" v-if="bannershow">
				<uni-swiper-dot :info="banners" :current="bannerCurrent" mode="nav" field="content">
					<swiper class="banner-swipe" :autoplay="true" :interval="3000" :circular="true"
						@change="swiperChange">
						<swiper-item class="banner-swipe-item w100 h100" v-for="(item, index) in banners" :key="index">
							<view class="banner-swipe-img w100 h100 bg-cover"
								:style="{backgroundImage: 'url(' + item.image + ')'}"></view>
						</swiper-item>
					</swiper>
				</uni-swiper-dot>
			</view>
			<!-- 价格 -->
			<view class="info1 flex-row-between flex-start">
				<view class="left">
					<view class="p1 flex-row-start">
						<image class="icon" src="https://static.newbeaconhotels.com/app/hotel/group/icon-group.png"></image>
						<view class="font10 font-ffffff">拼团:&nbsp;&nbsp;&nbsp;{{datainfo.spell_number}}人团</view>
					</view>
					<view class="p2 font12 font-ffffff">拼团价</view>
					<view class="p3 font11 font-ffffff">
						￥<text class="font18">{{spec_show.group_price}}</text>
						<text class="font-line">￥{{spec_show.line_price}}</text>
					</view>
				</view>
				<view class="right tc">
					<view class="p font12 font-ffffff">距团购活动结束还剩:</view>
					<uni-countdown class="group-countdown" backgroundColor="rgba(255,255,255,.2)" color="#ffffff"
						splitorColor="#ffffff" :day="timeobj.day" :hour="timeobj.hour" :minute="timeobj.minute"
						:second="timeobj.second" :show-colon="false" />
				</view>
			</view>
			<!-- 酒店信息 -->
			<view class="info2 box-shadow">
				<view class="flex-row-start flex-wrap">
					<view class="tag" v-for="(item,index) in datainfo.goods_explain" :key="index">{{item.name}}</view>
				</view>
				<view class="name font15">{{datainfo.name}}</view>
				<view class="flex-row-between">
					<view class="font12 font-646464">已售{{datainfo.sales_actual+datainfo.sales_initial}}件 |
						库存{{datainfo.stock_num}}件 | {{datainfo.goods_type==20?'下单即发货':''}}</view>
					<view class="flex-row-end" @click="Onposharebo">
						<image class="icon" src="https://static.newbeaconhotels.com/app/hotel/group/icon-share.png"></image>
						<text class="font12 font-theme">分享</text>
					</view>
				</view>
			</view>
			<!-- 团信息 -->
			<view class="partner box-shadow" v-if="group.length>0">
				<view class="title font13">这些人刚刚发起拼团，可直接参团</view>
				<view class="box">
					<swiper class="swiper-group" :autoplay="true" :interval="3000" :vertical="true"
						:disable-touch="true" :circular="true">
						<swiper-item v-for="(item, i) in group" :key="i">
							<view v-for="(member, j) in item" :key="j" class="item flex-row-between">
								<view class="photo bg-cover"
									:style="{backgroundImage: 'url(' + member.user_info.user_avatar + ')'}">
								</view>
								<view class="name flex-1 font13 ellipsis">{{member.user_info.user_nickname}}</view>
								<view class="time">
									<view class="font12">还差<text
											class="font-assist">{{member.spell_number - member.count_user}}</text>人拼成
									</view>
									<view class="font11 font-999999">剩余 {{member.end_type}}</view>
								</view>
								<view class="btn" @click="openSpec('add',member)">去参团</view>
							</view>
						</swiper-item>
					</swiper>
				</view>
			</view>
			<!-- 切换 -->
			<view class="box-shadow box_shadow">
				<view class="info_tab">
					<view v-for="(item,index) in tabList" :key="index" @click="Ontab(item)">
						<view class="tab_box flex-column-center">
							<view class="font14 font-1e1e1e tab_title" :class="tabindex == item.id?'font-b':''">{{item.title}}
							</view>
							<view v-if="tabindex == item.id" class="tab_show"></view>
						</view>
					</view>
				</view>
				<!-- 商品详情 -->
				<view v-if="tabindex == 1" class="content">
					<rich-text :nodes="datainfo.content"></rich-text>
				</view>
				<!-- 用户评价 -->
				<view v-if="tabindex == 2" class="info_comment">
							<view class="comment_nav flex-row-start">
						<view v-for="(item,index) in commentNav" :key="index" :class="cNavIndex==item.id?'cnav_h':'cnav_m'"
							class="flex-row-start" @click="OnNav(item)">
							<text class="font12">{{item.title}}</text>
							<text class="margin-6 font10">({{item.num}})</text>
						</view>
					</view>
					<view v-for="(item,index) in commentList" :key="index" class="comment_list">
						<view class="comment_title flex-row-start">
							<image :src="item.user_avatar" mode=""></image>
							<view>
								<text class="font-323232 font14 font-b">{{item.user_name}}</text>
								<text class="font10 font-969696">{{item.appraise_time}}</text>
							</view>
						</view>
						<view class="font13 font-969696 comment_infos">{{item.appraise_content}}</view>
						<view class="comment_imglist">
							<image @click="Onpreview(item.appraise_img,index1)" v-for="(item1,index1) in item.appraise_img"
								:key="index1" v-if="item1" :src="imgFullUrl+item1" mode="">
							</image>
						</view>
						<view class="comment_reply font-969696 font13" v-if="item.commobj">
							<text>{{item.commobj.user_name}}:</text>
							<text>{{item.commobj.info}}</text>
						</view>
						<view class="comment_border"></view>
					</view>
					<view class="info_loading font-969696 font13" v-if="commentLoad!='true'">{{commentLoad=='empty'?'暂无用户评价':'已加载全部'}}</view>
				</view>
			</view>
			<view class="bottom_bar"></view>
		</view>
		<!-- 底部操作信息 -->
		<view class="bottom-bar flex-row-between flex-start">
			<view class="part1 flex-row-center">
				<view class="item" @click="goNext('/pages/home/index', true)">
					<image class="icon" src="https://static.newbeaconhotels.com/app/hotel/group/icon-home.png"></image>
					<view class="font10">首页</view>
				</view>
				<view class="item" @tap="openTel">
					<image class="icon" src="https://static.newbeaconhotels.com/app/hotel/group/icon-online.png"></image>
					<view class="font10">客服</view>
				</view>
			</view>
			<view class="part2 flex-row-end flex-start">
				<view class="btn btn1" @tap="openSpec('alone')" v-if="datainfo.is_single == 1">
					<view class="font18">
						<text class="font13">￥</text>{{spec_show.goods_price?spec_show.goods_price:0.00}}
					</view>
					<view class="p1 font12">单独预订</view>
				</view>
				<view class="btn btn2" @tap="openSpec('open')">
					<view class="font18">
						<text class="font13">￥</text>{{spec_show.chief_price?spec_show.chief_price:0.00}}
					</view>
					<view class="p1 font12">一键开团</view>
				</view>
			</view>
		</view>
		<!-- 规格弹窗 -->
		<uni-popup ref="specification" type="bottom">
			<view class="specification">
				<uni-icons class="close" type="close" size="22" color="#666666" @tap="closeSpec"></uni-icons>
				<view class="part1 flex-row-start">
					<image class="image bg-cover"
						:src="findItem.spec_image?imgFullUrl+findItem.spec_image:datainfo.logo" mode="">
					</image>
					<view class="price">
						<view class="font-assist font11">￥<text class="font18">
								{{findItem.goods_price?type_is=='alone'?findItem.goods_price:findItem.group_price:datainfo.group_price}}</text>
						</view>
						<view class="font12 font-646464">库存 {{findItem.stock_num?findItem.stock_num:datainfo.stock_num}}
							件</view>
					</view>
				</view>
				<view class="part2 font13" v-if="datainfo.spec_type == 10">默认规格</view>
				<view class="part2" v-else v-for="(item,index) in datainfo.spec" :key="index">
					<view class="font13">{{item.spec_name}}</view>
					<view @click="Onchoice(item1,index,index1)"
						:class="!item1.show?'font-969696':goodsIndex[index] == index1?'font-ff3c37 back-ffe9e8':'font-323232'"
						class="tag" v-for="(item1,index1) in item.value" :key="index1">{{item1.spec_value}}</view>
				</view>
				<view class="part3 flex-row-between">
					<view class="font13">数量</view>
					<uni-number-box v-model="buyNum" :min="1" :max="maxBuyNum" @change="buyNumChange"></uni-number-box>
				</view>
				<!-- <view class="btn">单独预订</view> -->
				<view class="btn" @click="Oncart">{{type_is=='open'?'一键开团':type_is=='alone'?'单独购买':'参加拼团'}}</view>
			</view>
		</uni-popup>
		<!-- 联系客服 -->
		<bottomPopup ref="tel" title="联系客服">
			<view class="contact-box">
				<view class="item nob flex-row-between" @tap="makePhone('400-626-2008')">
					<view>客服热线</view>
					<view>400-626-2008</view>
				</view>
			</view>
		</bottomPopup>
		<!-- 分享底部菜单 -->
		<bottomPopup ref="share" title="分享">
			<view class="share-box flex-row-between">
				<!--  #ifdef  MP-WEIXIN -->
				<button class="item flex-column-between" open-type="share">
					<image src="https://static.newbeaconhotels.com/app/hotel/share-style1.png"></image>
					<text>分享给朋友</text>
				</button>
				<!--  #endif -->
				<!--  #ifdef  H5 -->
				<view class="item flex-column-between" @click="OnjshareOpen">
					<image src="https://static.newbeaconhotels.com/app/hotel/share-style1.png"></image>
					<text>分享给朋友</text>
				</view>
				<!--  #endif -->
				<view class="item flex-column-between" @tap="Onpostershow">
					<image src="https://static.newbeaconhotels.com/app/hotel/share-style2.png"></image>
					<text>生成分享海报</text>
				</view>
			</view>
		</bottomPopup>
		<!-- 画布 -->
		<lPainter type="" custom-style="position: fixed; left: 200%;" :isH5PathToBase64="true" ref="painter" isRenderImage
			width="550rpx" height="750rpx" @success="Onimgsuccess" @fail="Onimgfail" />
		<!-- H5二维码 -->
		<!--  #ifdef  H5 -->
		<canvas canvas-id="qrcode" style="width: 90rpx;height: 90rpx;position: fixed; left: 200%;" />
		<!--  #endif -->
		<!-- 海报 -->
		<uni-popup ref="poster" type="center">
			<!--  #ifdef  MP-WEIXIN -->
			<view class="poster-box">
				<image class="banner" :src="datainfo.logo"></image>
				<view class="inner">
					<view class="money flex-row-start">
						<text class="font-ff3c37 font15 font-b font-line">￥{{datainfo.price}}</text>
						<view class="font-ffffff font14 font-b flex-row-center">￥{{datainfo.group_price}}</view>
					</view>
					<view class="name font-1e1e1e font13">{{datainfo.name}}</view>
					<view class="personal flex-row-start">
						<image class="photo" :src="userInfo.user.avatar"></image>
						<view class="center">
							<view class="font-1e1e1e font13 font-b">{{userInfo.user.name}}</view>
							<view class="font-646464 font11">扫码查看商品详情</view>
						</view>
						<image class="code" :src="wxcode"></image>
					</view>
					<view class="btn-save flex-row-center font-ffffff font15" @click="OnsaveImage">保存至相册</view>
				</view>
			</view>
			<!--  #endif -->

			<!--  #ifdef  H5 -->
			<image v-if="saveImageif" class="poster-h5" :src="saveImage"></image>
			<view class="btn-save-h5 font-ffffff font14 flex-row-center">长按图片保存至相册</view>
			<!--  #endif -->

			<image class="poster-close" src="https://static.newbeaconhotels.com/app/hotel/close-line.png" @click="Onposteclose">
			</image>
		</uni-popup>

		<!--  #ifdef  H5 -->
		<!-- H5分享 -->
		<JsharePopup ref="JsharePopup"></JsharePopup>
		<!--  #endif -->
	</view>
</template>

<script>
	import bottomPopup from "@/components/j-bottomPopup/index.vue";
	import lPainter from '@/components/lime-painter/'
	import uQRCode from '../../js_sdk/Sansnn-uQRCode/uqrcode.js'
	import {
		pathToBase64,
		base64ToPath
	} from '../../js_sdk/mmmm-image-tools/index.js'
	import JsharePopup from '@/components/j-sharePopup/index.vue';
	export default {
		components: {
			bottomPopup,
			lPainter,
			JsharePopup
		},
		data() {
			return {
				type_is: '', //开团单独拼图判断
				bannershow: false, //轮播显示
				id: null,
				timeobj: {}, //倒计时时间
				datainfo: {}, //数据
				addobj: {}, //拼团信息
				shopItemInfo: {}, //存放要和选中的值进行匹配的数据
				goodsArr: [], //存放被选中的值
				goodsIndex: [], //是否选中 因为不确定是多规格还是单规格，所以这里定义数组来判断
				goodsName: [], //选择文字
				findItem: {}, //数据
				spec_show:{},//外面展示的价格
				goodsImg: '', //默认图片
				showAttr: "",
				imgFullUrl: this.$Config.http_static, //图片地址
				http_h5_url: this.$Config.http_h5_url, //线上地址
				http_oss: this.$Config.http_oss, //画布域名
				imgAvatar: this.$Config.http_avatar, // 头像域名
				banners: [], // 轮播图
				bannerCurrent: 0,
				// 团
				group: [],
				// 数量
				maxBuyNum: 1,
				buyNum: 1,
				buyNumtype: false, //一进来不执行
				userInfo: {}, //用户个人信息
				userType: 2, // 1员工，2会员
				idInfo: {}, //分享参数
				saveImageif: false, //图片成功
				saveImage: '', //画图图片
				wxcode: '', //小程序二维码
				wxcodeh5: '', //H5二维码
				wxSdk: false, //H5api
				tabList: [{
						title: '商品详情',
						id: 1,
						show: false
					},
					{
						title: '用户评价',
						id: 2,
						show: true
					},
				],
				tabindex: 1,
				commentobj:{
					page:1,
					limit:10,
					goods_id:null,
					appraise_grade:''
				},
				commentList:[],//数据
				commentLoad:'empty',//
				commentNav: [{
						title: '全部',
						num: 0,
						id: 1,
						type:''
					},
					{
						title: '好评',
						num: 0,
						id: 2,
						type:'1'
					},
					{
						title: '中评',
						num: 0,
						id: 3,
						type:'2'
					},
					{
						title: '差评',
						num: 0,
						id: 4,
						type:'3'
					}
				],
				cNavIndex: 1,
			}
		},
		onLoad: function(options) {
			let query = {}
			if (this.$Route.query.scene) {
				query = this.$base.OnWxoptions(this.$Route.query.scene)
			}else{
				query = options
			}
			this.id = query.id
			this.commentobj.goods_id = query.id
			// #ifdef H5
			this.$wxapi.OnwxSdk().then(res => {
				this.wxSdk = res.code == 1 ? true : false
			})
			// #endif
			let token = uni.getStorageSync("token");
			if (token) {
				this.$Http({
					url: 'user',
					token: true,
				}).then(res => {
					if (res.code == 1) {
						res.data.user.avatar2 = this.imgAvatar + res.data.user.avatar2
						this.userInfo = res.data

						let type = res.data.user.group
						if (type.indexOf('员工') >= 0) {
							this.userType = 1
						} else if (type.indexOf('会员') >= 0) {
							this.userType = 2
						}

						this.OnDetails()
					}
				});
			} else {
				this.OnDetails()
			}
			this.idInfo = uni.getStorageSync('idInfo')
			this.OnSpell()
			this.Onreview()
		},
		methods: {
			//商品评论
			Onreview(){
				this.$Http({
					url: 'goodsAppraiseList',
					data: this.commentobj,
				}).then(res => {
					if (res.code == 1) {
						if(res.data.data.length==0){
							this.commentLoad = 'empty'
							return
						}
						this.commentNav[0].num = res.data.info.all_count
						this.commentNav[1].num = res.data.info.hao_count
						this.commentNav[2].num = res.data.info.zhong_count
						this.commentNav[3].num = res.data.info.cha_count
						if (this.commentobj.page >= res.data.all_page) {
							this.commentLoad = 'all'
						} else {
							this.commentLoad = 'true'
						}
						this.commentList = this.commentList.concat(res.data.data)
					}
				});
			},
			// 商品详情
			OnDetails() {
				this.$Http({
					url: 'getGoodsDetails',
					token: true,
					data: {
						goods_id: this.id
					},
				}).then(res => {
					if (res.code == 1) {
						let imagesList = []
						//把所有规格当key放到一个数组里面去
						res.data.spec_rel.forEach(item => {
							this.shopItemInfo[item.spec_sku_id] = item
						})
						//所以参数加show当未选择
						res.data.spec.forEach(item => {
							item.value.forEach(item1 => {
								item1.show = true
							})
						})
						res.data.images.forEach(item => {
							let obj = {
								image: this.imgFullUrl + item,
								content: ''
							}
							imagesList.push(obj)
						})
						var nowTime = Math.round(new Date().getTime());
						var ms = (res.data.end_time * 1000) - nowTime;
						var day = Math.floor(ms / (1000 * 60 * 60 * 24));
						var hour = Math.floor(ms / (1000 * 60 * 60)) % 24;
						if (day > 0) {
							hour = (day * 24) + hour
						}
						var minute = Math.floor(ms / (1000 * 60)) % 60;
						var second = Math.floor(ms / 1000) % 60;
						let timeobj = {
							'day': day,
							'hour': hour,
							'minute': minute,
							'second': second
						}
						this.timeobj = timeobj
						//如果是单规格
						if (res.data.spec_type == 10) {
							this.findItem = res.data.spec_rel[0]
						}
						// res.data.timeobj = timeobj
						res.data.content = res.data.content.replace(/\<img/gi, '<img class="rich-img660"')
						res.data.h5logo = this.http_oss + res.data.logo
						res.data.logo = this.imgFullUrl + res.data.logo
						this.datainfo = res.data
						this.banners = imagesList
						this.spec_show = res.data.spec_rel[0]
						this.spec_show.chief_price = this.$base.numSub(this.spec_show.group_price, res.data.chief_reduce)
						this.bannershow = true
						this.buyNumtype = true
						if (uni.getStorageSync("token")) {

							let message_id = '';
							let $C = this.idInfo.Cid

							if ($C) {
								message_id = 'Pid.' + this.idInfo.Pid + ',Fid.' + this.idInfo.Fid + ',id.' + this
									.id + ',Cid.' + $C
							} else {
								message_id = 'Pid.' + this.idInfo.Pid + ',Fid.' + this.idInfo.Fid + ',id.' + this
									.id
							}

							// #ifdef MP-WEIXIN
							this.share.type = true
							this.share.title = res.data.name
							this.share.desc = '您的好友' + this.userInfo.user.name + '分享您一个团购'
							this.share.imageUrl = this.datainfo.logo
							this.share.path = '/pages/group/detail?scene=' + message_id
							// 获取二维码
							this.OngetWxcode()
							// #endif
							// #ifdef H5
							if (this.wxSdk) {
								this.share.type = true
								this.share.title = res.data.name
								this.share.imageUrl = this.datainfo.logo
								this.share.path = '/pages/group/detail?scene=' + message_id
								this.Onshare()
							}
							// 获取H5二维码
							this.OnH5wxcode()
							// #endif
						}
					}
				});
			},
			//拼团列表
			OnSpell() {
				this.$Http({
					url: 'orderSpellList',
					token: true,
					data: {
						goods_id: this.id
					},
				}).then(res => {
					if (res.code == 1) {
						var arr = [];
						var data = res.data
						var nowTime = Math.round(new Date().getTime());
						data.forEach(item => {
							var ms = (item.end_time * 1000) - nowTime;
							if (ms > 0) {
								var hour = Math.floor(ms / (1000 * 60 * 60)) % 24;
								var minute = Math.floor(ms / (1000 * 60)) % 60;
								var second = Math.floor(ms / 1000) % 60;
								hour = hour < 10 ? '0' + hour : hour
								minute = minute < 10 ? '0' + minute : minute
								second = second < 10 ? '0' + second : second
								item.end_type = hour + ':' + minute + ':' + second
							} else {
								item.end_type = '已结束'
							}

						})
						for (var i = 0; i < data.length; i += 2) {
							arr.push(data.slice(i, i + 2));
						}
						this.group = arr
					}
				});
			},
			//选择
			Onchoice(item, index1, index2) {
				if (!item.show) {
					return
				}
				if (this.goodsArr[index1] != item.id) {
					this.goodsArr[index1] = item.id
					this.goodsIndex[index1] = index2
					this.goodsName[index1] = item.spec_value
				} else {
					this.goodsArr[index1] = undefined;
					this.goodsIndex[index1] = -1; //去掉选中的颜色
					this.goodsName[index1] = ''
					this.buyNum = 1
				}
				var showarr = this.goodsArr;
				var tempTop = [];
				showarr.forEach((item, i, arr) => {
					if (item) {
						tempTop.push(item)
					}
				})
				this.showAttr = tempTop.join(",");
				this.checkItem()
				tempTop = []
				this.$forceUpdate();
			},
			checkItem() {
				var option = this.datainfo.spec;
				var result = []; //定义数组存储被选中的值
				option.forEach((item, index) => {
					result[index] = this.goodsArr[index] ? this.goodsArr[index] : '';
				})
				if (this.shopItemInfo[result.join(",")]) {
					this.findItem = this.shopItemInfo[result.join(",")]
					this.maxBuyNum = this.findItem.stock_num
				} else {
					this.findItem = {}
					this.maxBuyNum = 1
				}
				for (var i in option) {
					var last = result[i]; //把选中的值存放到字符串last去
					for (var k in option[i].value) {
						result[i] = option[i].value[k].id; //赋值，存在直接覆盖，不存在往里面添加name值
						option[i].value[k].show = this.isMay(result); //在数据里面添加字段isShow来判断是否可以选择
					}
					result[i] = last; //还原，目的是记录点下去那个值，避免下一次执行循环时避免被覆盖
				}
				this.datainfo.spec = option
				this.$forceUpdate();
				console.log(this.findItem, '查看')
			},
			isMay: function(result) {
				for (var i in result) {
					if (result[i] == '') {
						return true; //如果数组里有为空的值，那直接返回true
					}
				}
				if (this.shopItemInfo[result.join(",")]) { //匹配选中的数据的库存，若不为空返回true反之返回false
					return this.shopItemInfo[result.join(",")].stock_num == 0 ? false : true;
				}
			},
			// 轮播图change
			swiperChange(e) {
				this.bannerCurrent = e.detail.current;
			},
			// 购买数量change
			buyNumChange(e) {
				if (!this.findItem.goods_id && this.buyNumtype) {
					uni.showToast({
						icon: 'none',
						duration: 2000,
						title: '请先选择规格'
					});
					return
				}
				this.buyNum = parseInt(e)
				if (this.buyNum > this.maxBuyNum && this.buyNumtype) {
					uni.showToast({
						title: '超出最大购买数量',
						icon: 'none'
					});
					return
				}
			},
			// 打开规则弹窗
			openSpec(e, obj) {
				this.type_is = e
				if (e == 'add') {
					this.addobj = obj
				}
				this.$refs.specification.open()
			},
			// 关闭规则弹窗
			closeSpec() {
				this.$refs.specification.close()
			},
			// 打开客服
			openTel() {
				this.$refs.tel.Onopen()
			},
			// 拨打电话
			makePhone(tel) {
				uni.makePhoneCall({
					phoneNumber: tel
				});
			},
			// 路由跳转: tag默认false,tag=true跳到tabBar页面
			goNext(url, tag) {
				if (tag) {
					uni.switchTab({
						url: url
					});
				} else {
					uni.navigateTo({
						url: url
					});
				}
			},
			//提交订单
			Oncart() {
				if (!this.findItem.goods_id) {
					uni.showToast({
						icon: 'none',
						duration: 2000,
						title: '请先选择规格'
					});
					return
				}
				let data = {
					pay_type: '',
					source: '',
					goods_id: this.findItem.goods_id,
					goods_spec_id: this.findItem.goods_spec_id,
					goods_number: this.buyNum,
				}
				// #ifdef MP-WEIXIN
				data.source = 2
				// #endif
				// #ifdef H5
				data.source = 1
				// #endif
				//开团
				if (this.type_is == 'open') {
					data.order_spell_id = 0
				}
				//拼团
				if (this.type_is == 'add') {
					data.order_spell_id = this.addobj.id
				}
				//单独购买
				if (this.type_is == 'alone') {
					data.pay_type = 2
				} else {
					data.pay_type = 1
				}
				this.$Http({
					url: 'createOrder',
					token: true,
					type: 'POST',
					data: data,
				}).then(res => {
					if (res.code == 1) {
						// this.findItem = {}
						this.$Router.push('/pages/group/book?code=' + res.data.order_code)
					} else {
						uni.showToast({
							icon: 'none',
							duration: 2000,
							title: res.msg
						});
					}
				});
			},
			//分享的底部菜单
			Onposharebo() {
				if (!uni.getStorageSync("token")) {
					uni.showToast({
						icon: 'none',
						duration: 3000,
						title: '请先登录'
					});
					return
				}
				this.$refs.share.Onopen()
			},
			//海报弹窗
			Onpostershow() {
				if (uni.getStorageSync("token")) {
					// #ifdef H5
					uni.showLoading({
						title: '海报生成中',
						mask: true
					});
					this.onCustom()
					// #endif
					// #ifdef MP-WEIXIN
					this.$refs.share.onClose()
					this.$refs.poster.open()
					// #endif
				} else {
					uni.showToast({
						icon: 'none',
						duration: 3000,
						title: '请先登录'
					});
				}
			},
			//H5分享弹出
			OnjshareOpen() {
				this.$refs.share.onClose()
				this.$refs.JsharePopup.Onopen()
			},
			//小程序获取二维码
			OngetWxcode() {
				let data = {};
				data.page = '/pages/group/detail';

				// 员工分享的父id是自己，会员分享的父id是终极父id
				let $P = this.userType == 1 ? this.userInfo.user.user_id : this.userInfo.user.parent_id;
				// 分享出去的来源id永远是自己的id
				let $F = this.userInfo.user.user_id;
				let $C = this.idInfo.Cid

				if ($C) {
					data.message_id = 'Pid.' + $P + ',Fid.' + $F + ',id.' + this.id + ',Cid.' + $C
				} else {
					data.message_id = 'Pid.' + $P + ',Fid.' + $F + ',id.' + this.id
				}

				this.$Http({
					url: 'getQrcode',
					data: data,
				}).then(res => {
					if (res.code == 1) {
						this.wxcode = res.data // 将回车换行换为空字符''
						// 画海报
						this.onCustom()
					}
				});
			},
			//H5海报二维码
			OnH5wxcode() {
				let that = this;
				let url = 'https://jd.newbeaconhotels.com/h5/jd/pages/group/detail?scene='
				let message_id = '';

				// 员工分享的父id是自己，会员分享的父id是终极父id
				let $P = this.userType == 1 ? this.userInfo.user.user_id : this.userInfo.user.parent_id;
				// 分享出去的来源id永远是自己的id
				let $F = this.userInfo.user.user_id;
				let $C = this.idInfo.Cid

				if ($C) {
					message_id = 'Pid.' + $P + ',Fid.' + $F + ',id.' + this.id + ',Cid.' + $C
				} else {
					message_id = 'Pid.' + $P + ',Fid.' + $F + ',id.' + this.id
				}

				console.log(url + message_id)
				uQRCode.make({
					canvasId: 'qrcode',
					text: url + message_id,
					size: uni.upx2px(90)
				}).then(res => {
					base64ToPath(res)
						.then(path => {
							that.wxcodeh5 = path
						})
						.catch(error => {
							console.error(error)
						})
				}).finally(() => {

				})
			},
			//海报
			onCustom() {
				// 支持通过调用render传入参数
				const painter = this.$refs.painter
				var base = {
					width: '550rpx',
					background: '#ffffff',
					height: '750rpx',
					// radius: '15rpx 15rpx 15rpx 15rpx',
					views: [{
							type: 'image',
							// #ifdef MP-WEIXIN
							src: this.datainfo.logo,
							// #endif
							// #ifdef H5
							src: this.datainfo.h5logo,
							// #endif
							css: {
								left: '0rpx',
								top: '0rpx',
								width: '550rpx',
								height: '500rpx',
								// radius: '15rpx 15rpx 0rpx 0rpx'
							}
						},
						{
							type: 'view',
							css: {
								height: '40rpx',
								width: '550rpx',
								left: '25rpx',
								top: '510rpx',
								background: '#ffffff',
							},
							views: [{
									type: 'text',
									text: '￥' + this.datainfo.group_price,
									css: {
										fontSize: '32rpx',
										color: '#ff3c37',
										lineHeight: '40rpx',
										margin: '0rpx 20rpx 0rpx 0rpx',
									}
								},
								{
									type: 'text',
									text: '￥' + this.datainfo.price,
									css: {
										fontSize: '24rpx',
										color: '#646464',
										textDecoration: 'line-through',
										lineHeight: '40rpx'
									}
								},
							]
						},
						{
							type: 'view',
							css: {
								left: '25rpx',
								top: '550rpx',
								width: '500rpx',
								height: '80rpx'
							},
							views: [{
								type: 'text',
								text: this.datainfo.name,
								css: {
									fontSize: '26rpx',
									textAlign: 'left',
									maxLines: 2,
									verticalAlign: 'middle'
								}
							}]
						},
						{
							type: 'image',
							// #ifdef MP-WEIXIN
							src: this.userInfo.user.avatar,
							// #endif
							// #ifdef H5
							src: this.userInfo.user.avatar2,
							// #endif
							css: {
								left: '25rpx',
								top: '640rpx',
								width: '80rpx',
								height: '80rpx',
								radius: '40rpx',
								background: '#ffffff'
							}
						},
						{
							type: 'view',
							css: {
								left: '125rpx',
								top: '640rpx',
								width: '310rpx',
								height: '80rpx',
							},
							views: [{
									type: 'text',
									text: this.userInfo.user.name,
									css: {
										fontSize: '26rpx',
										color: '#1e1e1e',
										display: 'block',
										height: '40rpx',
										lineHeight: '40rpx'
									}
								},
								{
									type: 'text',
									text: '扫码查看商品详情',
									css: {
										fontSize: '22rpx',
										color: '#646464',
										lineHeight: '40rpx',
										height: '40rpx',
										display: 'block'
									}
								},
							]
						},
						// #ifdef MP-WEIXIN
						{
							type: 'image',
							src: this.wxcode,
							css: {
								left: '410rpx',
								top: '635rpx',
								width: '90rpx',
								height: '90rpx',
							}
						},
						// #endif
						// #ifdef H5
						{
							type: 'image',
							src: this.wxcodeh5,
							css: {
								left: '410rpx',
								top: '635rpx',
								width: '90rpx',
								height: '90rpx',
							}
						},
						// #endif
					]
				}
				painter.render(base)
			},
			//画布图片成功没有
			Onimgsuccess(res) {
				// #ifdef H5
				this.$refs.share.onClose()
				this.$refs.poster.open()
				uni.hideLoading();
				// #endif
				this.saveImage = res
				this.saveImageif = true
			},
			canvasToTempFilePath() {
				const painter = this.$refs.painter
				// 支持通过调用canvasToTempFilePath方法传入参数 调取生成图片
				painter.canvasToTempFilePath().then(res => console.log('999999999999999999999999'))
			},
			//失败
			Onimgfail() {
				uni.hideLoading();
				uni.showToast({
					icon: 'none',
					duration: 3000,
					title: '生成海报失败'
				});
			},
			//保存
			OnsaveImage(res) {
				let that = this
				if (this.saveImageif) {
					uni.saveImageToPhotosAlbum({
						filePath: that.saveImage,
						success(res) {
							uni.showToast({
								title: '已保存到相册',
								icon: 'success',
								duration: 2000
							})
							that.$refs.poster.close()
						}
					})
				} else {
					uni.showToast({
						icon: 'none',
						duration: 3000,
						title: '海报生成中~'
					});
				}
			},
			//关闭海报
			Onposteclose() {
				this.$refs.poster.close()
			},
			//切换
			Ontab(e) {
				this.tabindex = e.id
			},
			OnNav(e){
				this.cNavIndex = e.id
				this.commentobj.appraise_grade = e.type
				this.commentobj.page = 1
				this.commentobj.limit = 10
				this.commentList = []
				this.Onreview()
			},
			//放大图片
			Onpreview(list, e) {
				let imgList = []
				list.forEach(item=>{
					let c = this.imgFullUrl + item
					imgList.push(c)
				})
				uni.previewImage({
					current: e, //预览图片的下标
					urls: imgList //预览图片的地址，必须要数组形式，如果不是数组形式就转换成数组形式就可以
				})
			}
		},
		// 触底加载
		onReachBottom() {
			if(this.tabindex==2&&this.commentLoad=='true'){
				this.commentobj.page++
				this.Onreview()
			}
		},
	}
</script>

<style lang="less">
	@import '@/common/css/share.less';
	@import url("style.less");
</style>
